
import { memo, useState } from 'react';
import { Button, Card, Form } from '@douyinfe/semi-ui';
import { IconGithubLogo } from '@douyinfe/semi-icons';
import styled from 'styled-components';
import { login } from '../../services/AuthorizeService';

import { useNavigate } from 'react-router-dom';

const GithubButton = styled.span`
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    &:hover {
        transition: all 0.3s;
        color: #0366d6;
        cursor: pointer;
    }
`;


const Login = memo(() => {
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();
    async function handleLogin(value: any) {
        try {
            setLoading(true);
            const result = await login(value.account, value.password);
            if (result.success) {
                localStorage.setItem('token', result.data);
                navigate('/panel');
            }
        } catch (error) {

        } finally {
            setLoading(false);
        }
    }
    return (
        <Card style={{
            margin: '0 auto',
            marginTop: '100px',
            padding: '20px',
            maxWidth: '500px',
            borderRadius: '8px',
        }}>
            <Form onSubmit={(value) => handleLogin(value)} render={() => (
                <>
                    <div style={{ margin: '0 auto', width: '100%', marginBottom: '20px' }}>
                        <div style={{ textAlign: 'center', marginBottom: '20px', }}>
                            <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1845" width="100" height="100"><path d="M353.32 81.68c104.76-0.28 209.52-0.24 314.24-0.04 46.12 0.88 93.32 0.08 137.92 13.56 52.16 17.92 95.32 59.24 118 109.24 17.72 42.8 17.44 90.12 18.68 135.64 0.72 101.28 0.16 202.56 0.32 303.84-0.52 45.6 0.48 91.56-7.48 136.64-10 58.32-51.12 108.28-102.2 136.44-35.56 19.72-77.16 22.44-116.92 24.4-105.2 2.24-210.48 0.56-315.72 1.08-50.76-0.48-101.88 1.2-152.2-6.64-61.12-9.04-113.76-51.84-142.32-105.6-17.96-33.76-20.72-72.72-22.92-110.2-2.36-90.68-0.72-181.44-1.2-272.16 0.12-49.24-0.52-98.52 1.4-147.76 2.24-36.24 5.32-73.84 22.76-106.44 24.4-45.84 66.04-83.52 115.84-99.44 42.8-12.12 87.72-11.76 131.8-12.56m37.84 143.44c-74.2 29.72-135.56 89.72-166.96 163.2-23.16 52.64-29 111.72-21.12 168.36 10.08 66.16 42.88 128.4 91.32 174.44 8.84-3.56 11.12-18 17.2-25.68-45.76-44.76-74.68-106.08-80.68-169.8 100.56-49.92 201.04-100.08 301.64-149.8 23.68-12.4 55.08 6.88 55.44 33.4 8.32 114.96 18.2 229.88 25.52 344.88-44.6 18.36-93.44 24.68-141.36 19.92-5.44 9.16-10.72 18.4-15.76 27.8 95.64 15.96 197.76-16.6 265.88-85.72 56.4-55.96 90.04-134.64 89.56-214.24 1.28-61.16-17.32-122.36-51.44-173.04-35.2-52.56-86.96-93.88-146.2-116.16-71.16-27.12-152.52-26.24-223.04 2.44m69.4 298.36c-16.08 4.88-29 18.28-33.52 34.44-8.68 27.88 12 59.6 40.88 63.16 30.28 5.64 60.56-22.24 57.6-52.84-1.04-31.28-35.28-55.08-64.96-44.76m-111.8 168.24c-14.16 17.4-26.28 36.32-39.84 54.2-4.48 6.4-11.16 13.04-8.68 21.64 2.96 8.8 16.64 9.8 20.64 1.36 13.72-18.24 26.72-37.04 40.36-55.4 2.52-4.24 7.2-8.44 5.76-13.92-0.28-8.52-11.84-13.28-18.24-7.88m52.04 15.08c-22.96 31.56-42.2 65.8-63.96 98.24-3.88 6.76-11.04 13.72-7.8 22.24 3.76 9.64 18.04 8.88 21.72-0.48 22.56-35.52 45.68-70.72 67.68-106.56 3.72-10.28-8.92-19.36-17.64-13.44m39.76 32.92c-14.28 21.2-25.88 44.08-39.4 65.8-2.92 5.8-8.32 11.48-6.76 18.48 2.04 9.16 16.72 11.08 21.08 3 13.12-21.24 25.2-43.12 38.16-64.48 2.96-5.48 7.96-11.64 4.84-18.12-2.56-7.12-12.12-8.92-17.92-4.68z" fill="#000000" p-id="1846"></path></svg>
                        </div>
                        <div style={{ marginBottom: '20px', width: '108%' }}>
                            <Form.Input
                                field='account'
                                size='large'
                                label='账号'
                                placeholder="请输入账号" />
                        </div>
                        <div style={{ marginBottom: '20px', width: '108%' }}>
                            <Form.Input
                                field='password'
                                label='密码'
                                type='password'
                                size='large'
                                placeholder="请输入密码"
                            />
                        </div>
                    </div>
                    <div style={{ marginBottom: '20px', marginTop: '20px', width: '100%' }}>
                        <Button
                            loading={loading}
                            size='large'
                            type="tertiary"
                            htmlType='submit'
                            block >
                            登录
                        </Button>
                    </div>
                    <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '0 auto', width: '380px', paddingBottom: '8px', paddingTop: '20px' }}>
                        <GithubButton rel="noopener noreferrer">
                            <IconGithubLogo /> GitHub登录
                        </GithubButton>
                    </div>
                </>
            )} layout='horizontal'>
            </Form>
        </Card>
    );
});

export default Login;